@charset "utf-8";
@import "./common.scss";
#index {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vw;
    background-color: #ccc;
    line-height: 10vw;
    clear: both;
    color: #ffffff;
    z-index: 500;
    .mel_left {
        width: 10vw;
        height: 10vw;
        float: left;
        background-color: black;
        i {
            color: #ffffff;
            font-size: 16px;
        }
    }
    .mel_center {
        width: 80vw;
        height: 10vw;
        float: left;
        background-color: black;
    }
    .mel_right {
        width: 10vw;
        height: 10vw;
        float: right;
        background-color: black;
        i {
            color: #ffffff;
            font-size: 16px;
        }
    }
}

.the_sidebar {
    width: 60vw;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .95);
    position: absolute;
    top: 10vw;
    z-index: 500;
    animation: my_show_hidden 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation: my_show_hidden 5s linear 2s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: my_show_hidden 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation: my_show_hidden 5s linear 2s infinite alternate;
    @keyframes my_show_hidden {
        0% {
            transform: rotateX(0vw);
        }
        25% {
            transform: rotateX(30vw);
        }
        50% {
            transform: rotateX(40vw);
        }
        75% {
           transform: rotateX(50vw);
        }
        100% {
            transform: rotateX(60vw);
        }
    }
    @-moz-keyframes my_show_hidden/* Firefox */
    {
        0% {
            transform: rotateX(0vw);
        }
        25% {
            transform: rotateX(30vw);
        }
        50% {
            transform: rotateX(40vw);
        }
        75% {
           transform: rotateX(50vw);
        }
        100% {
            transform: rotateX(60vw);
        }
    }
    @-webkit-keyframes my_show_hidden/* Safari and Chrome */
    {
       0% {
            transform: rotateX(0vw);
        }
        25% {
            transform: rotateX(30vw);
        }
        50% {
            transform: rotateX(40vw);
        }
        75% {
           transform: rotateX(50vw);
        }
        100% {
            transform: rotateX(60vw);
        }
    }
    @-o-keyframes my_show_hidden/* Opera */
    {
       0% {
            transform: rotateX(0vw);
        }
        25% {
            transform: rotateX(30vw);
        }
        50% {
            transform: rotateX(40vw);
        }
        75% {
           transform: rotateX(50vw);
        }
        100% {
            transform: rotateX(60vw);
        }
    }
    ul {
        li {
            display: list-item;
            line-height: 10vw;
            padding-top: 1vw;
            color: #9a9a9a;
            overflow: hidden;
            clear: both;
            font-size: 2.5vw;
            span {
                float: left;
                padding-left: 5vw;
            }
            i {
                float: right;
                padding-right: 5vw;
            }
        }
    }
}